<template>
  <div>
    <div style="font-size: 18px; margin-top: 5%; margin-bottom: 5%">
      识别结果
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; top: -5%"
      max-height="350"
    >
      <el-table-column
        prop="cabinetId"
        label="屏柜号"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="consistent"
        label="结果"
        width="100"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.consistent === true ? 'success' : 'danger'"
            disable-transitions
            >{{ scope.row.consistent === true ? "一致" : "不一致" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template>
          <el-button size="mini" @click="detail">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="80%" :show-close="false">
        <myResultDetail @close-dialog="dialogVisible = false;" :result="result"></myResultDetail>
      </el-dialog>
    <div style="position: relative; margin-top: 11%; left: 0; right: 0">
      <el-button type="info" style="margin-right: 10%" @click="last()"
        >上一步</el-button
      >
      <div class="myButton" style="display: inline-block">
        <el-button
          style="margin-top: 11%"
          type="info"
          circle
          @click="$refs.fileInput.click()"
          icon="el-icon-check"
        ></el-button>
      </div>
      <el-button
        type="info"
        style="margin-left: 10%"
        @click="next()"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import myResultDetail from "@/components/MyResultDetail";

export default {
  data() {
    return {
      result: null,
      activeNames: ["information", "compare", "inconsistent"],
      matrixRow: 0,
      dialogVisible: false,
      matrixColumn: 0,
      state: {
        on: "投",
        off: "退",
        nothing: "备",
      },
      tableData: [],
    };
  },
  components: {
    myResultDetail,
  },
  mounted() {
    var _this = this;
    var img = this.$store.getters.img;
    var imgUrl = this.$store.getters.imgUrl;
    var number = this.$store.getters.number;

    this.$store
      .dispatch("identity", { file: img, number: number })
      .then((res) => {
        console.log(res);
        var result = {};
        result.originImg = imgUrl;
        result.cabinetId = res.data["cabinetId"];
        result.returnImg = res.data["detectedImagePath"];
        result.dateTime = res.data["dateTime"];
        result.switchs = res.data["result"];
        result.consistent = res.data["result"].every(
          (element, index, result) => {
            return element.isCorrect;
          }
        );

        _this.result = result;
        _this.tableData.push(result);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    handleCommand(params) {
      console.log("操作");
    },
    detail() {
      this.dialogVisible = true;
    },
    last() {
      this.$emit("lastStep");
    },
    next() {
      this.$emit("nextStep");
    },
  },
};
</script>

<style scoped>
</style>